<script setup>
import { ref } from 'vue';

// 接收参数
const props = defineProps({
  previewImageList: { // 预览图片组
    type: Array,
  },
})

// 预览图片的起始下标
const previewImgIndex = ref(null)

// 显示图片预览效果
const showImageViewer = (index) => {
  // 禁止滚动
  stopScroll()
  // 显示图片预览效果
  previewImgIndex.value = index
  console.log("图片预览组件显示", previewImgIndex.value)
}

// 将显示图片方法暴露给父组件
defineExpose({ showImageViewer })

// 关闭组件
const closeImageViewer = () => {
  // 开始滚动
  startScroll()
  // 关闭图片预览效果
  previewImgIndex.value = null
}

// 禁止滚动
const stopScroll = () => {
  document.body.style.overflow = "hidden"
}

// 开始滚动
const startScroll = () => {
  document.body.style.overflow = "auto"
}

</script>

<template>
  <div class="image-viewer" v-if="previewImgIndex != null">
    <el-image style="width: 100px; height: 100px" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
      :preview-src-list="previewImageList" :initial-index="previewImgIndex" :hide-on-click-modal="false" fit="cover"
      @close="closeImageViewer" />
  </div>
</template>

<style scoped></style>